<div className="pay-container">
    <div id="mtable">
        <ul className="tab clearfix">
            <li className={Component.state.active == 1 ? 'active' : ''} onClick={Component.toggleTab.bind(Component, 1)}>余额支付</li>
            <li className={Component.state.active == 2 ? 'active' : ''} onClick={Component.toggleTab.bind(Component, 2)}>银行卡支付</li>
            <li className={Component.state.active == 3 ? 'active' : ''} onClick={Component.toggleTab.bind(Component, 3)}>支付平台</li>
        </ul>
        <div className="operation-box">
            <div className={Component.state.active == 1 ? 'balance-payment active' : 'balance-payment'}>
            余额：1000.00(CNY)
        </div>
        <div className={Component.state.active == 2 ? 'card-payment active clearfix' : 'card-payment clearfix'}>
        {
        banks.map(function(item, index){
        return (
        <dl className={item.value ? 'clearfix active' : 'clearfix'} onClick={Component.setPaymentBank.bind(Component, index)}>
        <dt>
            <div className="radio radio-red">
                <input type="radio" id={item.id} checked={item.value}/>
                <label></label>
            </div>
        </dt>
        <dd>{item.name}</dd>
        </dl>
        );
        })
        }
    </div>
    <div className={Component.state.active == 3 ? 'payment-platform active clearfix' : 'payment-platform clearfix'}>
    {
    platform.map(function(item, index){
    return (
    <dl className={item.value ? 'clearfix active' : 'clearfix'} onClick={Component.setPaymentPlatform.bind(Component, index)}>
    <dt>
        <div className="radio radio-red">
            <input type="radio" id={item.name} checked={item.value}/>
            <label></label>
        </div>
    </dt>
    <dd><img src={item.src} alt={item.name} /></dd>
    </dl>
    );
    })
    }
</div>
</div>
</div>
</div>